---
id: migrating_from_v3_beta
title: Migrating from previous beta versions
sidebar_label: Migrating from previous beta versions
---

## FireCMS PRO

If you are migrating from previous beta versions of FireCMS PRO, you will need to make some updates to your project.
The main components have changed theis composition. Instead of having a single `Scaffold` components with all the configuration,
you have additionally an `AppBar` and a `Drawer` component.

More information about the main components can be found in the [Main Components](/docs/self/main_components) section.

### User management auth controller

For self-hosted versions, there has been a change in the API for the data management controllers. The
`authController` is now passed to the User Management controller, instead of the other way around. The `userManagementController`
can be used as an auth controller, but with all the added logic for user management.

❌ Code before:
```typescript
    /**
     * Controller in charge of user management
     */
    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate
    });

    /**
     * Controller for managing authentication
     */
    const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions,
        loading: userManagement.loading,
        defineRolesFor: userManagement.defineRolesFor
    });
```

✅ Code after:

```typescript
    /**
     * Controller for managing authentication
     */
    const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions
    });

    /**
     * Controller in charge of user management
     */
    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate,
        authController
    });
```

The `userManagement` controller now also qualifies as an `authController`, so you can use it as such, but it is not
necessary to do so.


### Styling

You also will need to import the default FireCMS styles in your project. You can do this by adding the following import to your `index.css` file:

```css
@import "@firecms/ui/index.css";
```

Your `index.css` file should look like this:

```css
@import "@firecms/ui/index.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --fcms-primary: #0070F4;
    --fcms-primary-bg: #0061e610;
    --fcms-secondary: #FF5B79;
}
```

### Dependencies

The default fonts are now imported in the clients project (so they can be replaced if needed).
You need to add these imports:
```
    "typeface-rubik": "^1.1.13",
    "@fontsource/jetbrains-mono": "^5.0.20",
```



## FireCMS Cloud

If you are migrating from previous beta versions of FireCMS Cloud, you will need to make some updates to your project.

### Dependencies

The main package has been renamed from `firecms` to `@firecms/cloud` since version `3.0.0-beta.4`.
You can also remove the `@firecms/cli` package, as it is implicitly installed by `@firecms/cloud`.

This is a sample `package.json` with the new config:
```
{
  "name": "my-firecms-project",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 5001",
    "build": "vite build",
    "serve": "vite preview --port 5001",
    "deploy": "run-s build && firecms deploy --project=YOUR_PROJECT_ID"
  },
  "dependencies": {
    "@firecms/cloud": "^3.0.0-beta",
    "firebase": "^12.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.5",
    "@tailwindcss/typography": "^0.5.10",
    "@types/react": "^18.2.71",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.4.3",
    "vite": "^5.2.6"
  }
}
```

### Imports

You need to update your imports to use the new package name. For example, if you have a file that imports `firecms`:

```javascript
import { FireCMS } from "firecms";
```

You need to update it to use the new package name:

```javascript
import { FireCMS } from "@firecms/cloud";
```

### Vite configuration

You also need to update your `vite.config.js` file to include the new package name and config:

```javascript
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
        logOverride: { "this-is-undefined-in-esm": "silent" }
    },
    plugins: [
        react(),
        federation({
            name: "remote_app",
            filename: "remoteEntry.js",
            exposes: {
                "./config": "./src/index"
            },
            shared: [
                "react",
                "react-dom",
                "@firecms/cloud",
                "@firecms/core",
                "@firecms/firebase",
                "@firecms/ui",
                "@firebase/firestore",
                "@firebase/app",
                "@firebase/functions",
                "@firebase/auth",
                "@firebase/storage",
                "@firebase/analytics",
                "@firebase/remote-config",
                "@firebase/app-check"
            ]
        })
    ],
    build: {
        modulePreload: false,
        target: "ESNEXT",
        cssCodeSplit: false,
    }
})
```

### Tailwind CSS

- You need to add the tailwind typography plugin to your project. You can do this by installing the `@tailwindcss/typography` package:

  ```bash
  yarn add -D @tailwindcss/typography
  ```

- You should also make sure you are using at least version `3.4.3` of the `tailwindcss` package, and `postcss` version `8.4.38`.

- The preset now comes from the `@firecms/ui` package. You can update your `tailwind.config.cjs` file to include the new preset:

  ```javascript
  import fireCMSConfig from "@firecms/ui/tailwind.config.js";

  export default {
      presets: [fireCMSConfig],
      content: [
          "./index.html",
          "./src/**/*.{js,ts,jsx,tsx}",
          "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}",
      ],
  };
  ```

